<template>
    <div>
        <a-spin :spinning="this.spinning">
            <a-card :bodyStyle="{padding:'12px'}">
                <a-tag color="green">生成的页面参考系统角色</a-tag>
                <a-tag color="green">前端生成的文件分别在pages，services，store目录下</a-tag>
                <a-tag color="#f5222d"><a target="_blank" href="https://www.bejson.com/">JSON格式化与校验</a></a-tag>
            </a-card>
            <a-card>
                <a-form :form="form">
                    <a-form-item
                            label="组件名称"
                            :label-col="{span:10}"
                            :wrapper-col="{span:6}"
                    >
                        <a-input
                                allowClear
                                placeholder="首字母大写驼峰命名"
                                v-decorator="['name', {
                                initialValue: this.generate.name,
                                rules: [{ required: true, message: '请输入组件名称！' }]
                            }]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item
                            label="菜单名称"
                            :label-col="{span:10}"
                            :wrapper-col="{span:6}"
                    >
                        <a-input
                                allowClear
                                placeholder="如：代码生成器"
                                v-decorator="['menuName', {
                                initialValue: this.generate.menuName,
                                rules: [{ required: true, message: '请输入菜单名称！' }]
                            }]"
                        ></a-input>
                    </a-form-item>

                    <a-form-item
                            label="文件与菜单路径"
                            :label-col="{span:10}"
                            :wrapper-col="{span:6}"
                    >
                        <a-input
                                allowClear
                                placeholder="参考浏览器url，驼峰命名，格式如 xxx/yyy/zzz"
                                v-decorator="['path', {
                                initialValue: this.generate.path,
                                rules: [{ required: true, message: '请输入菜单路径！' }]
                            }]"
                        ></a-input>
                    </a-form-item>
                    <a-space direction="vertical" style="width: 100%">
                        <a-form-item
                                label="查询条件（不超过四个）"
                                :label-col="{span:10}"
                                :wrapper-col="{span:10}"
                        >
                            <a-textarea
                                    allowClear
                                    :autoSize="true"
                                    placeholder='json对象形式，如{"name":"名字","age":"年龄"}'
                                    v-decorator="['query', {
                                initialValue: this.generate.query,
                                rules: [{ required: true, message: '请输入查询条件！' }]
                            }]"
                            ></a-textarea>
                        </a-form-item>
                        <a-form-item
                                label='表格表头字段'
                                :label-col="{span:10}"
                                :wrapper-col="{span:10}"
                        >
                            <a-textarea
                                    allowClear
                                    placeholder='格式同上但name，age为数据库字段'
                                    :autoSize="true"
                                    v-decorator="['tableHead', {
                                initialValue: this.generate.tableHead,
                                rules: [{ required: true, message: '请输入表格字段！' }]
                            }]"
                            ></a-textarea>
                        </a-form-item>
                    </a-space>
                </a-form>
            </a-card>

            <div style="margin-top: 10px;text-align: center;">
                <a-space>
                    <a-button type="primary" @click="last">
                        上一步
                    </a-button>
                    <a-button type="primary" @click="next">
                        下一步
                    </a-button>
                </a-space>
            </div>
        </a-spin>
    </div>
</template>

<script>
  import {mapActions, mapMutations, mapState} from 'vuex'

  export default {
    name: "SecondCard",
    data() {
      return {
        form: this.$form.createForm(this)
      }
    },
    computed: {
      ...mapState('workplace', ['generate', 'current', 'spinning'])
    },
    methods: {
      ...mapMutations('workplace', ['setState']),
      ...mapActions('workplace', ['generateCode']),
      next() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.setState({name: 'spinning', value: true})
            this.setState({name: 'generate', value: {...this.generate, ...values}})
            this.generateCode()
          }
        })
      },
      last() {
        this.setState({name: 'current', value: this.current - 1})
      }
    }
  }
</script>

<style scoped>
    /deep/ .ant-tag {
        font-size: 14px
    }

    /deep/ .ant-form-item {
        margin-bottom: 12px;
    }
</style>